import { useReducer, useEffect } from 'react'
// import 'antd/dist/reset.css'
import './App.css'
import styles from './app.less'
import Header from './layout/Header'
import Center from './layout/Center'
import Left from './layout/Left'
import Right from './layout/Right'
import { useCanvas } from './store/hooks'
import { CanvasContext } from './Context'
function App() {
	const canvs = useCanvas()
	const [, foceUpdate] = useReducer(x => x + 1, 0)
	useEffect(() => {
		const unsubscribe = canvs.subscribe(() => {
			foceUpdate()
		})
		// 组件销毁时取消订阅
		return () => unsubscribe()
	}, [canvs])
	return (
		<div className={styles.main}>
			<CanvasContext.Provider value={canvs}>
				<Header />
				<div className={styles.content}>
					<Left />
					<Center />
					<Right />
				</div>
			</CanvasContext.Provider>
		</div>
	)
}

export default App
